<template>
  <div v-loading="loading">
    <baidu-map class="map" :center="center" :zoom="zoom" :ak="ak" @ready="handler" @click="handleClick">
      <bm-marker :position="markerPoint" :dragging="true" :icon="{url: 'https://api.map.baidu.com/images/marker_red_sprite.png', size: {width: 19, height: 25}}" @click="infoWindowOpen">
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">{{ info.shop_addr }}</bm-info-window>
      </bm-marker>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
      <bm-local-search :keyword="location" :auto-viewport="true" :location="location" hidden="true" @searchcomplete="handleSearch" />
    </baidu-map>
    <div class="origin">
      <div class="address">
        <p>地点：</p>
        <el-input v-model="location" type="text" placeholder="请搜索关键字" class="input-container" />
        <!-- <el-button type="primary" @click="handleLocation">定位</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'

export default {
  name: 'Map',
  components: {
    BaiduMap,
    BmMarker,
    BmInfoWindow,
    BmNavigation,
    BmLocalSearch
  },
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      ak: 'QbwIG6bvMSMtjkph6mYi4ulMeYVZGp45',
      zoom: 14,
      center: '',
      markerPoint: { lat: 0, lng: 0 },
      show: false,
      loading: true,
      location: ''
    }
  },
  created() {
  },
  methods: {
    handler({ BMap, map }) {
      this.center = {}
      this.center.lng = this.info.lng
      this.center.lat = this.info.lat
      this.zoom = 14
      this.markerPoint.lng = this.info.lng
      this.markerPoint.lat = this.info.lat
      this.loading = false
      this.removeWatermark()
    },
    infoWindowClose() {
      this.show = false
    },
    infoWindowOpen() {
      this.show = true
    },
    handleClick({ type, target, point, pixel, overlay }) {
      this.setMap(point)
    },
    removeWatermark() {
      const watermark = [].slice.call(document.getElementsByClassName('anchorBL'))
      watermark.map((item) => {
        console.log(item)
        item.style = 'display: none'
      })
      // watermark.style = 'display: none'
    },
    setMap(location) {
      this.center = {}
      this.center.lng = location.lng
      this.center.lat = location.lat
      this.markerPoint.lng = location.lng
      this.markerPoint.lat = location.lat
      this.zoom = 14
      this.$emit('changePoint', location)
    },
    handleSearch(result) {
      if (!result || !result.Ar[0]) return
      const { point } = result.Ar[0]
      this.setMap(point)
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  width: 500px;
  height: 500px;
  margin-bottom: 20px;
}
.address{
  display: flex;
  align-items: center;
}
.input-container{
  width: 300px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>
